<template>
    <div>
        <el-card class="!border-none" shadow="never">

            <el-table size="large" v-loading="pager.loading" :data="pager.lists">
                <el-table-column label="序号" type="index" min-width="80" />
                <el-table-column label="标签名称" min-width="180" prop="name"/>
                <el-table-column label="图片" min-width="160" prop="image_url">
                    <template #default="{ row }">
                        <div class="flex align-middle">
                            <el-image style="width: 38px; height: 38px"
                                    :src="row.image_url"
                                    :zoom-rate="1.2"
                                    :max-scale="7"
                                    :min-scale="0.2" 
                                    fit="contain"
                                    :preview-teleported="true"
                                    :preview-src-list="[row.image_url]"></el-image>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="状态" min-width="120" prop="type">
                    <template #default="{ row }">
                        <span v-if="row.is_enable == 1">启用</span>
                        <el-link v-else type="danger" :underline="false">停用</el-link>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="240" fixed="right">
                    <template #default="{ row }">
                        <el-link class="link mr-4" v-perms="['channel.channel_badge/detail']" type="primary" :underline="false" @click="handleEdit(row)">编辑</el-link>
                        <el-link v-if="row.is_enable != 1" class="link" v-perms="['channel.channel_badge/updateStatus']" type="primary" :underline="false" @click="handleOpen(row)">启用</el-link>
                        <el-link v-if="row.is_enable == 1" class="link" v-perms="['channel.channel_badge/updateStatus']" type="danger" :underline="false" @click="handleClose(row)">停用</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
        <el-dialog
                v-model="showIcon"
                title="编辑标签"
                width="900"
                @close="handleDiaClose"
        >
            <el-form
                ref="formRef"
                :model="formData"
                :rules="rules"
                label-width="180"
                require-asterisk-position="right"
            >
                <el-form-item label="标签名称" prop="name">
                    <div class="w-80">
                        <el-input
                            v-model="formData.name"
                            placeholder="请输入标签名称"
                            type="text"
                            maxlength="15"
                            show-word-limit
                            clearable
                        />
                    </div>
                </el-form-item>

                <el-form-item label="头像框图片圆形" prop="image_url">
					<div class="w-80">
						<div>
							<material-picker v-model="formData.image_url" :limit="1"/>
						</div>
						<div class="form-tips">建议尺寸：130*130px</div>
					</div>
				</el-form-item>

                <el-form-item v-if="formData.id == 1" label="新渠道入驻显示规则" prop="display_days">
                    <div class="flex">
                        <div>当有用户成为平台渠道后，平台会自动赋予相应头像框，并在前台进行显示，显示时间</div>
                        <div class="w-28">
                            <el-input
                                v-model="formData.display_days"
                                placeholder="请输入"
                                type="text"
                                maxlength="5"
                                clearable
                            />
                        </div>
                        <div>天</div>
                    </div>
                </el-form-item>
                <div v-if="formData.id == 1" class="pl-44">超出显示周期自动消失，显示时间可以后续自行修改，修改后已经佩戴该头像框的渠道用户系统根据其已佩戴该头像框的时间与更改的时间进行对比，已佩戴时间大于更改时间，显示时间结束头像框消失、已佩戴时间小于更改时间，其显示的时间自动更新成更改的时间</div>


                <el-form-item v-if="formData.id == 2" label="助融达人显示规则" prop="display_days">
                    <div>计算周期 每</div>
                    <div class="w-28">
                        <el-input
                            v-model="formData.display_days"
                            placeholder="请输入时间"
                            type="text"
                            maxlength="5"
                            clearable
                        />
                    </div>
                    <div>天</div>
                </el-form-item>
                <div v-if="formData.id == 2" class="pl-44">设置好计算周期后，系统会自动统计上一计算周期的排名并赋予符合条件渠道头像框，在系统赋予渠道该类型的头像框后开始计算显示周期，并在该头像框显示的周期大于系统设置的计算周期时，开始重新计算渠道排名并重新分配头像框，以此类推<br/>统计周期为管理员设置的时间<br/>后续管理员可以自行修改计算周期，修改后，重新计算排名</div>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="onCancel">取消</el-button>
                    <el-button v-perms="['channel.channel_badge/edit']" type="primary" @click="onSubmit" :loading="loading">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup name="headIcon">
import { usePaging } from '@/hooks/usePaging';
import { badgeLists, badgeDetail, badgeEdit, badgeStatus } from '@/api/operation';
import type {FormInstance} from 'element-plus';
import feedback from '@/utils/feedback'
const queryParams:any = reactive({
		
})
const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: badgeLists,
    params: queryParams
})
const formRef = shallowRef<FormInstance>()
const showIcon = ref(false);
const formData:any = reactive({
    id: '',
    name: '',
    image_url: '',
    display_days: '',
    is_enable: ''
})
const rules = reactive({
    name: [{required: true, message: '请输入标签名称', trigger: 'blur'}],
    image_url: [{required: true, message: '请选择头像框图片圆形', trigger: 'blur'}],
    display_days: [{required: true, message: '请输入时间', trigger: 'blur'}],
})
const handleDiaClose = () => {
    console.log('===')
    setTimeout(function () {
        formRef.value?.clearValidate();//消除校验,这里的setTimeOut不能去掉,去掉之后会不生效
    },30);
}

const onCancel = () => {
    setTimeout(function () {
        formRef.value?.clearValidate();//消除校验,这里的setTimeOut不能去掉,去掉之后会不生效
    },30);
    showIcon.value = false
}
const loading = ref(false)
const onSubmit = async() => {
    try{
        await formRef.value?.validate()
        loading.value = true;
        console.log(formData)
        await badgeEdit(formData)
        showIcon.value = false;
        getLists()
    }catch(error){
        console.log(error)
    }
}

const handleEdit = async (row:any) => {
    const res = await badgeDetail({id: row.id});
    Object.keys(formData).forEach((key) => {
        //@ts-ignore
        formData[key] = res[key]
    })
    loading.value = false;
    showIcon.value = true;
}
const handleOpen = async (row:any) => {
    try{
        await feedback.confirm('启用之后，渠道可正常显示该头像框')
        await badgeStatus({
            id: row.id,
            is_enable: 1
        })
        getLists();
    }catch(error){
        console.log(error)
    }
}
const handleClose = async (row:any) => {
    try{
        await feedback.confirm('停用之后，该头像框不可被渠道展示，且正在使被渠道所使用的该头像框也会隐藏消失')
        await badgeStatus({
            id: row.id,
            is_enable: 0
        })
        getLists();
    }catch(error){
        console.log(error)
    }
}

onMounted(async () => {
    getLists();
});
</script>